<template>
	<view class="container">
		<view class="member-card">
			<view class="member-info">
				<image class="member-avatar" :src="memberInfo.avatar || '/static/default-avatar.png'"></image>
				<view class="member-details">
					<view class="member-name">{{memberInfo.nickName || '用户昵称'}}</view>
					<view class="member-id">ID: {{memberInfo.userId || '--'}}</view>
				</view>
			</view>
			
			<view class="info-list">
				<view class="info-item">
					<text class="info-label">加入时间</text>
					<text class="info-value">{{formatDate(memberInfo.joinTime) || '--'}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">消费金额</text>
					<text class="info-value">{{memberInfo.totalSpent || 0}}元</text>
				</view>
				<view class="info-item">
					<text class="info-label">最近活跃</text>
					<text class="info-value">{{formatDate(memberInfo.lastActiveTime) || '--'}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">手机号码</text>
					<text class="info-value">{{formatPhone(memberInfo.phoneNumber) || '--'}}</text>
				</view>
			</view>
		</view>
		
		<view class="section-card">
			<view class="section-title">
				<text>订单记录</text>
			</view>
			
			<view v-if="orders.length === 0" class="empty-tip">
				<text>暂无订单记录</text>
			</view>
			
			<view v-else class="order-list">
				<view class="order-item" v-for="(item, index) in orders" :key="index">
					<view class="order-header">
						<text class="order-id">订单号: {{item.orderId}}</text>
						<text class="order-status" :class="'status-' + item.status">{{getOrderStatusText(item.status)}}</text>
					</view>
					<view class="order-content">
						<text class="order-title">{{item.productName}}</text>
						<view class="order-info">
							<text class="order-time">{{formatDateTime(item.createTime)}}</text>
							<text class="order-price">￥{{item.totalAmount}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="load-more" v-if="hasMoreOrders && orders.length > 0">
				<text class="load-text" @click="loadMoreOrders">查看更多订单</text>
			</view>
		</view>
		
		<view class="action-buttons">
			<button class="action-btn message-btn" @click="sendMessage">发送消息</button>
			<button class="action-btn disabled" @click="unBindMember">解除关系</button>
		</view>
	</view>
</template>

<script>
	import api from '../../../api/api.js';
	
	export default {
		data() {
			return {
				memberId: '',
				memberInfo: {},
				orders: [],
				orderPageNum: 1,
				orderPageSize: 5,
				hasMoreOrders: false
			}
		},
		onLoad(options) {
			if (options.id) {
				this.memberId = options.id;
				this.getMemberDetail();
				this.getMemberOrders();
			} else {
				uni.showToast({
					title: '会员ID不存在',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		methods: {
			async getMemberDetail() {
				try {
					uni.showLoading({
						title: '加载中...'
					});
					
					const res = await api.user.getMemberDetail({
						memberId: this.memberId
					});
					
					if (res.code === 200 && res.data) {
						this.memberInfo = res.data;
					}
				} catch (err) {
					console.error('获取会员详情失败', err);
					uni.showToast({
						title: '获取会员详情失败',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			},
			async getMemberOrders(loadMore = false) {
				try {
					if (!loadMore) {
						this.orderPageNum = 1;
					}
					
					const res = await api.order.getMemberOrders({
						memberId: this.memberId,
						pageNum: this.orderPageNum,
						pageSize: this.orderPageSize
					});
					
					if (res.code === 200) {
						const list = res.data.list || [];
						
						if (loadMore) {
							this.orders = [...this.orders, ...list];
						} else {
							this.orders = list;
						}
						
						this.hasMoreOrders = this.orders.length < (res.data.total || 0);
					}
				} catch (err) {
					console.error('获取会员订单失败', err);
					uni.showToast({
						title: '获取会员订单失败',
						icon: 'none'
					});
				}
			},
			loadMoreOrders() {
				if (this.hasMoreOrders) {
					this.orderPageNum++;
					this.getMemberOrders(true);
				}
			},
			formatDate(timestamp) {
				if (!timestamp) return '';
				
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				
				return `${year}-${month}-${day}`;
			},
			formatDateTime(timestamp) {
				if (!timestamp) return '';
				
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				
				return `${year}-${month}-${day} ${hours}:${minutes}`;
			},
			formatPhone(phone) {
				if (!phone) return '';
				return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
			},
			getOrderStatusText(status) {
				const statusMap = {
					'1': '待付款',
					'2': '已付款',
					'3': '已发货',
					'4': '已完成',
					'5': '已取消',
					'6': '已退款'
				};
				return statusMap[status] || '未知状态';
			},
			sendMessage() {
				uni.navigateTo({
					url: `/pages/message/chat?userId=${this.memberId}&nickName=${this.memberInfo.nickName || '用户'}`
				});
			},
			unBindMember() {
				uni.showModal({
					title: '解除关系',
					content: '确定要解除与该会员的关系吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								uni.showLoading({
									title: '处理中...'
								});
								
								const result = await api.user.unbindMember({
									memberId: this.memberId
								});
								
								if (result.code === 200) {
									uni.showToast({
										title: '解除成功',
										icon: 'success'
									});
									
									setTimeout(() => {
										uni.navigateBack();
									}, 1500);
								}
							} catch (err) {
								console.error('解除关系失败', err);
								uni.showToast({
									title: '解除关系失败',
									icon: 'none'
								});
							} finally {
								uni.hideLoading();
							}
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding: 20rpx;
		box-sizing: border-box;
	}
	
	.member-card {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(255, 0, 0, 0.1);
	}
	
	.member-info {
		display: flex;
		align-items: center;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.member-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		margin-right: 20rpx;
	}
	
	.member-details {
		flex: 1;
	}
	
	.member-name {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.member-id {
		font-size: 26rpx;
		color: #999;
	}
	
	.info-list {
		padding-top: 20rpx;
	}
	
	.info-item {
		display: flex;
		justify-content: space-between;
		padding: 16rpx 0;
		font-size: 28rpx;
		border-bottom: 1px solid #f9f9f9;
	}
	
	.info-item:last-child {
		border-bottom: none;
	}
	
	.info-label {
		color: #666;
	}
	
	.info-value {
		color: #333;
		font-weight: 500;
	}
	
	.section-card {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(255, 0, 0, 0.1);
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.empty-tip {
		padding: 50rpx 0;
		text-align: center;
		color: #999;
		font-size: 28rpx;
	}
	
	.order-list {
		margin-top: 20rpx;
	}
	
	.order-item {
		background-color: #f9f9f9;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.order-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}
	
	.order-id {
		font-size: 24rpx;
		color: #666;
	}
	
	.order-status {
		font-size: 24rpx;
		font-weight: bold;
	}
	
	.status-1 {
		color: #FF9800;
	}
	
	.status-2, .status-3 {
		color: #2196F3;
	}
	
	.status-4 {
		color: #4CAF50;
	}
	
	.status-5, .status-6 {
		color: #F44336;
	}
	
	.order-content {
		padding: 10rpx 0;
	}
	
	.order-title {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 10rpx;
		display: block;
	}
	
	.order-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.order-time {
		font-size: 24rpx;
		color: #999;
	}
	
	.order-price {
		font-size: 30rpx;
		color: #FF0000;
		font-weight: bold;
	}
	
	.load-more {
		text-align: center;
		padding: 20rpx 0;
	}
	
	.load-text {
		font-size: 28rpx;
		color: #666;
		padding: 10rpx 30rpx;
		display: inline-block;
	}
	
	.action-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}
	
	.action-btn {
		flex: 1;
		margin: 0 15rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-weight: normal;
	}
	
	.message-btn {
		background-color: #FF0000;
		color: #FFFFFF;
	}
	
	.disabled {
		background-color: #F2F2F2;
		color: #999999;
	}
</style> 